<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>推箱子</title>
	</head>
	<body>
		<script>
			function Animals(name,sex,age){
				this.name = name;
				this.sex = sex;
				this.age = age;
			}
			function Home(top,left){
				this.top = top;
				this.left = left;
			}
			function Mesages() {
				this.cat = new Animals("Tom","man","2");
				this.home = new Home("100px","100px");
			}
			Animals.prototype.say = function(){
				console.log("hello,i am "+this.name);
			}
			let aa = new Mesages();
			let bb = [0,1];
		</script>
		<!-- <script>
        let map = document.querySelectorAll('.wrap-map')[0];
            aHelp = document.querySelector('#help');
            prelevel = document.querySelector('#prelevel');
            nextlevel = document.querySelector('#nextlevel');
            prestep = document.querySelector('#prestep');
            hperson = [];
            hbox = [];
            level = 0;
        
        function Wall(x,y){
            this.x = x+3;
            this.y = y+3;
            this.name = document.createElement('div');
            this.name.className = 'wall';
            this.name.setAttribute('style',`top: ${this.y * 35 - 11}px;left: ${this.x * 35}px;`);
            map.appendChild(this.name);
        }
        //人物对象构造函数
        function People(x,y){
            this.x = x+3;
            this.y = y+3;
            this.name = document.createElement('div');
            this.name.id = "people";
            this.name.className = "down";
            this.name.setAttribute('style',`top: ${this.y*35}px;left: ${this.x*35}px;`);
            map.appendChild(this.name);
        }
        People.prototype.move = function(charCode) {
            //将人物位置存入历史数组
            hperson.push({x:this.x,y:this.y});
            //移动 设置新位置
            manUpdate(charCode,this);
            this.name.setAttribute("style",`left: ${this.x*35}px; top: ${this.y*35}px`);
        }
        function manUpdate(key,obj){
            switch(key){
                case 37: 
                    obj.name.className = "left";
                    obj.x--;
                    break;
                case 38: 
                    obj.name.className = "up";
                    obj.y--;
                    break;
                case 39: 
                    obj.name.className = "right";
                    obj.x++;
                    break;
                case 40: 
                    obj.name.className = "down";
                    obj.y++;
                    break;
            }
        }
        //箱子对象构造函数
        function Box(x,y){
            this.x = x+3;
            this.y = y+3;
            this.name = document.createElement('div');
            this.name.className = 'box';
            this.name.setAttribute('style',`top: ${this.y * 35}px;left: ${this.x * 35}px;`);
            map.appendChild(this.name);
        }
        
        Box.prototype.move = function(charCode){
            hbox.push({x:this.x,y:this.y});
            update(charCode,this);
            this.name.setAttribute('style',`top: ${this.y * 35}px;left: ${this.x * 35}px;`);
        }

        function update(key,obj){
            switch(key){
                case 37: 
                    obj.x--;
                    break;
                case 38: 
                    obj.y--;
                    break;
                case 39: 
                    obj.x++;
                    break;
                case 40: 
                    obj.y++;
                    break;
            }
        }

        //目标对象构造函数
        function Target(x,y){
            this.x = x+3;
            this.y = y+3;
            this.name = document.createElement('div');
            this.name.className = 'target';
            this.name.setAttribute('style',`top: ${this.y * 35}px;left: ${this.x * 35}px;`);
            map.appendChild(this.name);
        }

        //用于创建一局
        function Game(x) {
            //设置关卡
            this.level = x || 0;
            //获取地图数据
            this.map = mapData[parseInt(this.level)].map;
            //创建地图
            makeMap(this.map);
            //创建人物对象
            this.manLocals =  mapData[parseInt(this.level)].man;
            this.man = new People(this.manLocals.x,this.manLocals.y);
            //创建箱子对象
            this.boxLocals = mapData[parseInt(this.level)].box;
            this.boxs =  [];
            this.boxLocals.forEach(function(value,index){
                this.boxs[index] = new Box(value.x,value.y);
            },this);
            this.over = false;
        }
        //进行任务判断
        Game.prototype.judge = function(key){
            let manX = this.man.x;
                manY = this.man.y;
            if(key===37){
                //如果按下左方向键，如果人物左边不是墙
                if(this.map[manY-3][manX-1-3] != 1){
                    //判断左边第一格有没有箱子,如果返回-1，则没有箱子
                    let isBox = findBox(this.boxs,(manX-1),manY);
                    //不是箱子,只有人物左移一格，更新人物位置
                    if(isBox == -1){
                        this.man.move(key,this.man.name);
                    }
                    //如果左一有箱子
                    if(isBox != -1){
                        //判断左二是不是墙,不是墙则执行
                        if(this.map[manY-3][manX-2-3] != 1){
                            //判断左二是不是箱子
                            let isBox_1 = findBox(this.boxs,(manX-2),manY);
                            //如果左二不是箱子，则人物和箱子一起向左移一格
                            if(isBox_1 == -1){
                                let boxIndex = isBox.idx;
                                this.man.move(key,this.man.name);
                                this.boxs[boxIndex].move(key);
                            }
                        }
                    }
                }else {
                    this.man.name.className = "left";
                }
            }else if(key === 38){
                if(this.map[manY-1-3][manX-3] != 1){
                    //判断左边第一格有没有箱子,如果返回-1，则没有箱子
                    let isBox = findBox(this.boxs,manX,(manY-1));
                    
                    //不是箱子,只有人物左移一格，更新人物位置
                    if(isBox == -1){
                        
                        this.man.move(key);
                    }
                    //如果左一有箱子
                    if(isBox != -1){
                        
                        //判断左二是不是墙,不是墙则执行
                        if(this.map[manY-2-3][manX-3] != 1){
                            //判断左二是不是箱子
                            let isBox_1 = findBox(this.boxs,manX,(manY-2));
                            
                            //如果左二不是箱子，则人物和箱子一起向左移一格
                            if(isBox_1 == -1){
                                let boxIndex = isBox.idx;
                                this.man.move(key);
                                this.boxs[boxIndex].move(key);
                            }
                        }
                    }
                }else {
                    this.man.name.className = "up";
                }
            }else if(key === 39){
                if(this.map[manY-3][manX+1-3] != 1){
                    //判断左边第一格有没有箱子,如果返回-1，则没有箱子
                    let isBox = findBox(this.boxs,(manX+1),manY);
                    
                    //不是箱子,只有人物左移一格，更新人物位置
                    if(isBox == -1){
                        
                        this.man.move(key);
                    }
                    //如果左一有箱子
                    if(isBox != -1){
                        
                        //判断左二是不是墙,不是墙则执行
                        if(this.map[manY-3][manX+2-3] != 1){
                            //判断左二是不是箱子
                            let isBox_1 = findBox(this.boxs,(manX+2),manY);
                            
                            //如果左二不是箱子，则人物和箱子一起向左移一格
                            if(isBox_1 == -1){
                                
                                let boxIndex = isBox.idx;
                                this.man.move(key);
                                this.boxs[boxIndex].move(key);
                            }
                        }
                    }
                }else {
                    this.man.name.className = "right";
                }
            }else if(key === 40){
                if(this.map[manY+1-3][manX-3] != 1){
                    //判断左边第一格有没有箱子,如果返回-1，则没有箱子
                    let isBox = findBox(this.boxs,manX,(manY+1));
                    
                    //不是箱子,只有人物左移一格，更新人物位置
                    if(isBox == -1){
                        
                        this.man.move(key);
                    }
                    //如果左一有箱子
                    if(isBox != -1){
                        
                        //判断左二是不是墙,不是墙则执行
                        if(this.map[manY+2-3][manX-3] != 1){
                            //判断左二是不是箱子
                            let isBox_1 = findBox(this.boxs,manX,(manY+2));
                            
                            //如果左二不是箱子，则人物和箱子一起向左移一格
                            if(isBox_1 == -1){
                                
                                let boxIndex = isBox.idx;
                                this.man.move(key);
                                this.boxs[boxIndex].move(key);
                            }
                        }
                    }
                }else {
                    this.man.name.className = "down";
                }
            }
        };

        Game.prototype.isPass = function() {
            let arrTarget = [];
            arrLength = 0;
                row = this.map.length;
                column = this.map[0].length;
            for(let i = 0 ; i < row ; i++){
                for(let j = 0 ; j < column ; j++){
                    if(this.map[i][j] == 2){
                        arrTarget[arrLength] = {x:j,y:i};
                        arrLength++;
                    }
                }
            }
            //假设已经都重合
            let goon = true;
            // console.log(arrTarget);
            //验证
            arrTarget.forEach((value)=>{
                // console.log(value);
                let bol = findBox(this.boxs,value.x+3,value.y+3);
                //如果箱子与目标不重合
                // console.log(bol);
                if(bol == -1) {
                    goon = false;
                    return;
                }
            });
            if(goon){
                this.over = true;
            }
        }


        //查找特定位置是否有箱子，有则返回箱子，没有则返回-1
        function findBox(boxs,x,y){
            let result = 0;
                box = {};
                idx = -1;
            boxs.forEach((value,index)=>{
                if(value.x == x && value.y == y){
                    result = 1;
                    box = value;
                    idx = index;
                    
                }
                
            })
            
            if(result == 1){
                // console.log(222);
                return {box:box,idx:idx};
            }
            return -1;
        }

        //用于创建画面并返回人物的位置
        function makeMap(data) {
            let row = data.length;
                column = data[0].length;
                manLocal = {
                box:[
                    {x:0,y:0},
                    {x:0,y:0},
                    {x:0,y:0},
                    {x:0,y:0}
                ]
            };
            let boxNum = 0;
            for(let i = 0 ; i < row ; i++) {
                for(let j = 0 ; j < column ; j++) {
                    if(data[i][j] == 1) {
                        new Wall(j,i);
                    }
                    if(data[i][j] == 2) {
                        new Target(j,i);
                    }
                }
            }
            return manLocal;
        }

        let game = new Game(level);
        // let aPerson = makeMap(first);
        document.onkeydown = function(ev) {
            let key = ev.keyCode;
            game.judge(key);
            game.isPass();
            // console.log()
            if(game.over){
                setTimeout(()=>{
                    alert("Game Over");
                    if(level < 4){
                        level++;
                        map.innerHTML = "";
                        game = new Game(level);
                    }
                },500);
            }
        }
        //自动完成
        aHelp.onclick = function(){
            map.innerHTML = "";
            game = new Game(level);
            let index = 0;
            let timer = setInterval(function(){
                game.judge(mapData[level].auto[index]);
                index++;
                if(index == mapData[level].auto.length){
                    clearInterval(timer);
                }
            },500);
        }
        //上一关
        prelevel.onclick = function(){
            if(level > 0){
                level--;
                map.innerHTML = "";
                game = new Game(level);
            }
        }
        //下一关
        nextlevel.onclick = function(){
            if(level < 4){
                level++;
                map.innerHTML = "";
                game = new Game(level);
            }
        }

    </script> -->
	</body>
</html>
